<html>
  <head>
    <title>History</title>
    <link rel="stylesheet" type="text/css" href="style.css" />
  </head>

  <body>
    <div id="searchbar">
      <h1>
        Custom History Page
        <br />
        <small>Only show the history within one week.</small>
      </h1>
      <input
        id="searchInput"
        type="text"
        name="search"
        placeholder="Search History"
      />
      <input type="submit" id="searchSubmit" value="Search" />
      <input type="submit" id="deleteSelected" value="Remove Selected" />
      <input type="submit" id="removeAll" value="Remove All" />
    </div>
    <div id="historyDiv"></div>
    <template id="historyTemplate">
      <div class="history">
        <div class="image-wrapper"></div>
        <div class="page-meta">
          <div class="page-detail">
            <p class="page-title"></p>
            <a class="page-link" target="_blank"></a>
          </div>
          <div class="page-visit-time"></div>
        </div>
        <div class="actions">
          <input type="checkbox" class="removeCheck" />
          <button class="removeButton">remove</button>
        </div>
      </div>
    </template>
    <script src="logic.js"></script>
  </body>
</html>
